<template>
  <div v-loading="loading" class="main">
    <el-button
      round
      plain
      icon="iconfont icon-property"
      size="mini"
      style="min-width: 80px"
      @click="handleDialog"
    >
      属性
    </el-button>

    <el-dialog append-to-body :visible.sync="dialogVisible" title="审计点属性">
      <table>
        <tr>
          <th>审计点名称</th>
          <th>{{}}</th>
          <th>审计模型名称</th>
          <th>{{}}</th>
        </tr>
        <tr>
          <td>审计模型业务逻辑</td>
          <td colSpan="3">{{}}</td>
        </tr>
        <tr>
          <td>模型所用数据源</td>
          <td>{{}}</td>
          <td>业务归属系统</td>
          <td>{{}}</td>
        </tr>
        <tr>
          <td>一级业务流程</td>
          <td>{{}}</td>
          <td>二级业务流程</td>
          <td>{{}}</td>
        </tr>
        <tr>
          <td>模型运行频率</td>
          <td>{{}}</td>
          <td>模型上线时间</td>
          <td>{{}}</td>
        </tr>
        <tr>
          <td>审计实务来源</td>
          <td>{{}}</td>
          <td>域/专题</td>
          <td>{{}}</td>
        </tr>
      </table>
    </el-dialog>
  </div>
</template>

<script>
import widget from '@/mixins/widget'

export default {
  mixins: [widget],

  data() {
    return {
      auditAttrData: {},
      dialogVisible: false
    }
  },

  methods: {
    async getData() {
      await this.$nextTick()
      this.auditAttrData = await this.httpRequest(this.interactParams)
    },
    handleDialog() {
      this.dialogVisible = !this.dialogVisible
      if (this.dialogVisible) this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  /deep/.iconfont {
    font-size: 13px;
    padding-right: 4px;
  }
}
table {
  border-width: 1px;
  border-collapse: collapse;
  width: 100%;
  th {
    font-size: 12px;
    width: 18%;
    background: #dbe0f2;
    border: 1px solid #dbe0f2;
    padding: 12px;
    color: #333333;
    text-align: left;
  }
  th:nth-child(even) {
    width: 32%;
  }
  td {
    font-size: 12px;
    width: 18%;
    border: 1px solid #dbe0f2;
    padding: 12px;
    color: #7787a2;
  }
  td:nth-child(even) {
    width: 32%;
  }
}
</style>
